import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Button, Card, Divider, Flex, Form, Typography } from "antd"
import { useState } from "react"

import { MinMax } from "@/components/common"

const Template = (args: { fields: [string, string]; isAllowNegative: boolean; label: string }) => {
	const { Title, Paragraph, Text } = Typography
	const [bodyStr, setBodyStr] = useState("")
	const submit = (body: any) => {
		setBodyStr(JSON.stringify(body))
	}
	return (
		<Form onFinish={submit}>
			<Typography>
				<Title level={2}>范围输入框</Title>
				<Paragraph>
					可复用范围输入框，如缺省示例&quot;<Text italic>输赢金额</Text>&quot;, 必须在business组件中封装后导出使用,
					所选范围将分别绑定所在表单的fields[0]和fields[1]属性,示例封装关键代码如下：
					<Divider />
					<Flex gap={8} align="center">
						<Text code>{`<MinMax fields={[${args.fields[0]}, ${args.fields[1]}]} label="${args.label}" />`}</Text>
						<ArrowRightOutlined />
						<Card>
							<MinMax {...args} />
						</Card>
					</Flex>
				</Paragraph>
				<Paragraph>
					<Button htmlType="submit" type="primary">
						提交
					</Button>
					<div>提交的body参数：{bodyStr}</div>
				</Paragraph>
			</Typography>
			{/* <Flex vertical gap={8}>
				<Flex gap={16} align="center">
					<span style={{ fontWeight: "bold" }}>代码示例:</span>
					<span></span>
				</Flex>
			</Flex> */}
		</Form>
	)
}

export default {
	title: "范围输入框类型",
	component: Template
}

type Story = StoryObj<typeof Template>

export const WinMinMax: Story = {
	args: {
		label: "输赢金额",
		fields: ["winMin", "winMax"]
	}
}
